<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>主页</title>
	<style>
		/*页头部分 勿改*/
		/*设置div背景色为white*/
        /*以下部分和页脚部分统一*/
        html{
            height:100%;
            margin:0;
        }
		body{
            height:100%;
            margin: 0;
            background-color: #f9f9f9;  
        }      
        a{text-decoration:none}
        .banner {
            z-index:99999;
            width:100%;
            height:70px;
            top:0;
            left:0;
            position: fixed;
            overflow: hidden;
            background: #fff;
            border-bottom: 1px solid rgba(30,35,42,.06);
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
            filter:alpha(Opacity=50);
            opacity: 0.95;
        }
        #logo {
            margin-top: 11px;
            margin-left: 42px;
            width: 115px;
            height: 46px;

        }
        .searchDiv{
            position: absolute;
            top: 15px;
            left: 182px;
            height: 35px;
            width: 224px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
        }
        #search {
            float: left;
            margin-top: 1.4px;
            width: 185px;
            height: 30px;
            border: 0;
            background-color: transparent;
            font: 13px 微软雅黑;
        }
        #btnLeft{
            margin-left: 30px;
            width: 235px;
            position: absolute;
            right: 12.6%;
            top: 20px;
        }
        #searchicon{
            float: right;
            margin-top: 3.5px;
            width: 28px;
            height: 28px;
        }
        #hpBtn{
            width: 112px;
            height: 30px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
            float: right;
        }
        #ppBtn{
            margin-right: 7px;
            float: right;
            width: 112px;
            height: 30px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
        }
        /*页脚*/
        footer{
			position: relative;
            bottom: 0;
            width: 100%;
            height: 60px;
            clear: both;
            padding-top: 20px;
            padding-bottom: 0;
        }
        #footer{
            text-align: center;
            background-color: white;
            height: 40px;
            width: 100%;
            margin-top: 20px;
            overflow: hidden;
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
        }
        #footText{
            height: 20px;
            margin: 5px auto;
        }


		/*主界面*/
		.main{
			
             margin:90px auto;
             width:1076px;
             height:auto;  
			 
        }
		/*左侧按钮及帖子浏览部分*/
		.left{
			float:left;
			margin-top:20px;
			width:740px;
			height:auto;	
			
		}
		.list{	
			margin-left:0;
			margin-top:0;		
			width:140px;
			height:160px;
			
			 
		}
		#recommend,#equity,#block3,#block4{
			width: 100%;
            height: 40px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
           
		}
		#passageArea{
			margin-top:-160px;
			margin-left: 142px;
			width:600px;
			height:auto;

		
		}
		/*右侧用户信息样式*/
		.right{
			margin-top:20px;
			float:right;			
			width:320px;
            height: 440px;
			background: white;
		}
		.personBlock{
            width: 320px;
            height: 440px;
            border: 1px solid #999999;
            border-radius: 3px;
            text-align: center;
        }
        #avatar{
            border: 5px solid aliceblue;
            border-radius:50%;
            width: 120px;
            height: 120px;
        }
        #avatarDiv{
            margin-top: 40px;
            text-align: center;
        }
        .personFont{
            font: normal 18px 微软雅黑;
        }
        #post{
            text-align: center;
            margin-top: 50px;
            width: 120px;
            height: 40px;
            border: 1px solid #999999;
            border-radius: 3px;
            background-color: white;
            font: 15px 微软雅黑;
            color: #666666;
        }
		.whole-container{
			
			min-height: 100%;
		}
</style>

</head>
<body>
    
	<div class="whole-container">
		<!--页头部分-->
		<div class="banner">
			<img src="logologin.png" id="logo"/>
			<div class="searchDiv">
				<input type="text" name="keyword" id="search" placeholder=" 请输入您要搜索的关键字">
				<a href="https://www.baidu.com"><img src="搜索.png" id="searchicon" /></a>
			</div>
			<div id="btnLeft">
				<input type="button" name="homepage" id="hpBtn" value="个人中心">
				<input type="button" name="homepage" id="ppBtn" value="首页">
			</div>
		</div>

		<!--主界面部分 固定宽度居中-->
		<div class="main">
			<!--左侧标签及浏览帖子部分-->
			<div class="left">
				<!--四个版块相应按钮-->
				<div class="list">
					<input type="button"  id="recommend" value="推荐"  onclick="showAtRight()">
					<input type="button"  id="equity" value="权益"  onclick="showAtRight()">
					<input type="button"  id="block3" value="XXX" onclick="showAtRight()">
					<input type="button"  id="block4" value="XXX" onclick="showAtRight()">
				</div>
				<!--下面的Div来浏览的帖子内容，id为passageArea-->
				<div  id="passageArea">


				</div>
			</div>






			<!--右侧用户信息部分-->
			<div class="right">
				<div class="personBlock">
					<div id="avatarDiv">
						<img src="头像示例.jpg" id="avatar">
					</div>
					<div>
						<br>
						<t class="personFont">这是一个用户名</t><br><br>
						<t class="personFont">粉丝：</t><t  class="personFont" id="fansNum">33</t><br>
						<t class="personFont">关注：</t><t class="personFont" id="followNum" >33</t>
					</div>
					<input type="button" name="post" id="post" value="发帖子"><br>
				</div>
			</div>
		</div>


	</div>
	<!--页脚部分-->
	<footer>
		<div id="footer">
			<div id="footText">
				<img src="giggleIcon.png" style="width: 20px;height: 20px;margin-bottom: -6px"   >
				<em style="font: 13px 微软雅黑;color: #999999;">giggle</em>
				<a href="https://www.baidu.com/" style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">关于我们</a>
				<em style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">© 2017 Zealers 版权所有</em>
			</div>
		</div>
	</footer>
	<!--页脚部分结束-->

</body>
</html>
